<template>
  <el-dialog
    v-model="dialogVisible"
    title="优惠券修改"
    width="430"
    class="qc-custom-dialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="dialog-form-wrap"
    >
      <el-form-item label="优惠券库存">
        <div>{{ ruleForm.couponCountOld }}</div>
      </el-form-item>
      <div class="dialog-flex count-wrap">
        <el-form-item label="库存变更" prop="isAdd">
          <qc-select
            :value="ruleForm.isAdd"
            :options="COUPON_ADD"
            placeholder="请选择"
            @change="handleCheckAdd"
            :clearable="false"
          >
          </qc-select>
        </el-form-item>
        <el-form-item label="" prop="couponCount" label-width="0">
          <el-input
            v-model.trim="ruleForm.couponCount"
            placeholder="请输入变更数量"
            maxlength="9"
            clearable
          >
            <template #append>张</template></el-input
          >
        </el-form-item>
      </div>
      <el-form-item label="优惠券使用说明" prop="introduce">
        <el-input
          v-model.trim="ruleForm.introduce"
          placeholder="请输入优惠券使用说明"
          maxlength="200"
          type="textarea"
          :rows="3"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup name="dialog-edit">
import type { FormInstance, FormRules } from 'element-plus';
import { IS_INT } from '@/utils/verify';
import { updateActivity } from '@/service/apis/market';

const COUPON_ADD = [
  {
    label: '增加',
    value: '1',
  },
  {
    label: '减少',
    value: '0',
  },
];

const ruleFormRef = ref<FormInstance>();

let dialogVisible = ref(false);

let ruleForm = reactive({
  id: '',
  couponCountOld: '',
  isAdd: '1',
  couponCount: '',
  introduce: '',
});

const checkCount = (rule: any, value: any, callback: any) => {
  if (
    ruleForm.isAdd === '0' &&
    Number(ruleForm.couponCount) > Number(ruleForm.couponCountOld)
  ) {
    callback(new Error('减少的数量不能大于库存数量'));
  }
  callback();
};
const rules = reactive<FormRules>({
  isAdd: [
    { required: true, message: '请选择变更类型', trigger: ['blur', 'change'] },
  ],
  couponCount: [
    { required: true, message: '请输入变更数量', trigger: 'blur' },
    {
      pattern: IS_INT,
      message: '请输入正确的数量，正整数',
      trigger: 'blur',
    },
    { validator: checkCount, trigger: 'blur' },
  ],
});

const handleCheckAdd = (e: any) => {
  ruleForm.isAdd = e;
};

const show = (row: any) => {
  ruleForm.isAdd = '1';
  ruleForm.couponCount = '';

  ruleForm.id = row.id;
  ruleForm.couponCountOld = row.restCount;
  ruleForm.introduce = row.introduce;
  dialogVisible.value = true;
};
const hide = () => {
  dialogVisible.value = false;
};

const emit = defineEmits(['get-data']);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const from = {
        id: ruleForm.id,
        couponCount:
          ruleForm.isAdd === '0'
            ? `-${ruleForm.couponCount}`
            : ruleForm.couponCount,
        introduce: ruleForm.introduce,
      };
      updateActivity(from).then((res: any) => {
        hide();
        emit('get-data');
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.count-wrap {
  :deep(.el-form-item:first-child .el-form-item__content) {
    width: 80px;
    margin-right: 12px;
  }
}
</style>